import React from 'react'
import { View, Image } from 'react-native'

import { Projector, SegmentedBar } from "./_teaset"
import { Lt, Jx, Jpp, Label, Color, Images, Dialog } from "./_utils"

export const eShare = Object.freeze({
    detail : 0,
    hotdaily : 1,
    material : 2,
})

export class cTemp{
    static _loginFromInfo = false;
    static setFromInfo(fromInfo){
        this._loginFromInfo = fromInfo;
    }
    static isFromInfo(){
        return this._loginFromInfo;
    }

    static _roleId = null;
    static setRoleId(roleId){
        this._roleId = roleId;
    }
    static getRoleId(){
        return this._roleId;
    }
}

// const c_indent = "         ";
// 缩进的文本
export class LabelGoodsTitle extends React.PureComponent{
    render(){
        let {style, numberOfLines, indent, children,...other} = this.props;
        if(!numberOfLines){
            numberOfLines = 2;
        }
        style = {
            fontSize:Lt.c16,
            color:Color.c3,
            ...style,
        }
        other = {style, numberOfLines, ellipsizeMode:"tail", ...other}
        return <Label {...other}>
        {
            indent ? <Label style={{color:Color.transparent, opacity:0}}>缩进</Label> : ""
            // indent ? c_indent : ""
        }
        {
            children
        }
        </Label>
    }
}

// View缩放
export class ViewScale extends React.PureComponent{
    render(){
        let {style, ipt, children, ...other} = this.props;
        if(Jx.isUndefined(ipt.r)){
            ipt.r = ipt.h / ipt.w;
        }
        let {width, height, 
            margin, marginTop, marginBottom, marginLeft, marginRight,marginHorizontal, marginVertical,
        ...style2} = (style || {});
        if(width){
            height = width * ipt.r;
        }else if(height){
            width = height / ipt.r;
        }
        else {
            let marginLeft2 = marginLeft || marginHorizontal || margin || 0;
            let marginRight2 = marginRight || marginHorizontal || margin || 0;            
            width = Jpp.width - marginLeft2 - marginRight2;
            height = width * ipt.r;
        }
        const pw = Jx.toDp(ipt.w);
        const ph = Jx.toDp(ipt.h);
        // const pr =  Jx.toDp(1000) / 1000;
        const transform = [{scale : (width / ipt.w)}];
        return  <View style = {{
            width,
            height,
            justifyContent:"center",
            alignItems:"center",
            ...style,
        }}>
            <View style={{width:pw, height:ph, transform, ...style2}} {...other}>{children}</View>
        </View>;
    }
}

export class SegProjector extends React.PureComponent{
//fields defaultIdx onChange titleFontSize children style barBorderStyle itemStyle titleStyle activeTitleStyle projectorStyle
    constructor(props){
        super(props);
        const { fields, defaultIdx, onChange } = this.props;
        this.state = {
            // fields,
            actIdx:(defaultIdx || 0)
        }
        onChange && onChange(this.state.actIdx);
        
        this.onChange = this.onChange.bind(this);
    }
    onChange(actIdx){
        this.setState({actIdx});
        const { onChange } = this.props;
        onChange && onChange(actIdx);
    }
    render(){
        // barStyle, 
        const { fields, defaultIdx, onChange, titleFontSize, children, 
            style, barBorderStyle, itemStyle, titleStyle, activeTitleStyle, projectorStyle, ...other} = this.props;
        const { actIdx } = this.state;
        return <View style = {{flex: children ? 1 : 0, ...style}}>
            {/* <View style = {{height:40, ...barBorderStyle}}> */}
                <SegmentedBar
                    // backgroundColor:Color.transparent, ...barStyle
                    style = {{height:40, backgroundColor:Color.transparent, ...barBorderStyle}}
                    indicatorPositionPadding = {0}
                    onChange = {this.onChange}
                    activeIndex={ defaultIdx ? actIdx : null}
                    {...other}
                >
                {
                    // this.state.
                    fields.map((v, i)=>{
                        return <SegmentedBar.Item
                            key = {i}
                            title = {v}
                            style = {{paddingLeft:2, paddingRight:2, ...itemStyle}}
                            titleStyle = {{fontSize:(titleFontSize || Lt.c16), color:Color.c6, ...titleStyle}}
                            activeTitleStyle = {{fontSize:(titleFontSize || Lt.c16), color:Color.theme, ...activeTitleStyle}}
                        />
                    })
                }
                </SegmentedBar>
            {/* </View> */}
            {
                children ?
                <Projector index = {actIdx} style = {{flex:1, ...projectorStyle}}>
                    {children}
                </Projector> : null
            }
        </View>
    }
}


export class ProjectorLR extends React.PureComponent{
    render(){
        const { titleFontSize, titleStyle, activeTitleStyle, children, indicatorType, ...other } = this.props;
        return <SegProjector
            indicatorType={indicatorType || "none" }
            titleFontSize={titleFontSize || Lt.c18}
            titleStyle={{color:"#FFA2B8", ...titleStyle}}
            activeTitleStyle={{color:"white", ...activeTitleStyle}}
            {...other}
        >
            { children }
        </SegProjector>;
    }
}

export class FlistGoodsEmpty extends React.PureComponent{
    render(){
        return <View style = {{flex:1, paddingTop:20, justifyContent:"center", alignItems:"center"}}>
            <Image source = {Images.wuneirong}/>
        </View>
    }
}

export class FlistHeadLine extends React.PureComponent{
    render(){
        return <View style = {{height:3, backgroundColor:Color.line}}/>
    }
}

export class ViewLine extends React.PureComponent{
    render(){
        const {style} = this.props;
        return <View style={{width:Jpp.width, height:1, backgroundColor:Color.line, ...style}}/>;
    }
}